import React, { Component } from 'react';

import { routerRedux, Route, Switch } from 'dva/router';


import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import { connect } from 'dva';
import { Button, Row, Col,
    Input, Card, Modal, Radio,Select,Checkbox,Form,
    message
    } from 'antd';
    import { getRoutes } from '../../utils/utils';
import classNames from 'classnames';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import styles from './ApplyProfile.less';
import u620 from '../../assets/u620.png';
import u622 from '../../assets/u622.png';
import querystring from 'querystring';
const TextArea = Input.TextArea;
const { Description } = DescriptionList;
const ButtonGroup = Button.Group;
const CheckboxGroup = Checkbox.Group;

const RadioGroup = Radio.Group;
const Option = Select.Option;

const getWindowWidth = () => (window.innerWidth || document.documentElement.clientWidth);

@connect(({ pendingTask,  }) => ({
  pendingTask,
}))
@Form.create()
export default class CompleteApplyDetails5 extends Component {
  state = {
    id: '',
    taskId: '',
    stepDirection: 'horizontal',
    modalVisible: false,
    assureMeansValue: '',
    assureMeansAllValue: [],
    mortgageValue: '',
    guaranteeLetter:'',
    businessArea: '',
    guaranteeKind:'',
    orgAuthorize: '',
    depositGood:'',
    owner:'',
    mortgageDoc: '',
    custTaskListLoading: false,
    mortgageVerify:'',
    note:'',
    mortgageOtherValue: '',
    mortgageDocValue:'',
    profileState5: null,
    // guaranteeType: 1, //单一 组合
  }

  componentDidMount() {
    const { dispatch, location } = this.props;
    const params = querystring.parse(location.search.slice(1));
    // console.log("qqqqqAAAAAAAAparams.id")
    // console.log(params.custId)
    this.setState({
      id: params.custId,
      taskId: params.taskId,
      reviewState: params.reviewState,
    })
    if (params.custId != null) {
      dispatch({
        type: 'pendingTask/queryGuarantee',
        payload: {
          id: params.custId,
        },
        callback:() =>{
          const { pendingTask: {guaranteeList} } = this.props;
          // console.log("guaranteeList",guaranteeList)
          guaranteeList&&
          guaranteeList.guaranteeMode == "单一" ?          
          this.setState({            
            guaranteeKind: guaranteeList.guaranteeKind,
          })
          :
          this.setState({
            assureMeansAllValue: guaranteeList.guaranteeKind,
          })
          // console.log(this.state.assureMeansAllValue)
          if(guaranteeList.mortgageDoc != "签订抵/质押合同" && guaranteeList.mortgageDoc != "公司出具股东会决议"){
            if(this.state.reviewState == 1){
              this.setState({
                mortgageDoc: "",
              }) 
            }else{
              this.setState({
                mortgageDoc: "其他",
                mortgageDocValue: guaranteeList.mortgageDoc,
              }) 
            }                     
          }else{
            this.setState({
              mortgageDoc: guaranteeList.mortgageDoc,
            }) 
          }
          if(guaranteeList.mortgage != "所购车辆" && guaranteeList.mortgage != "房屋" && guaranteeList.mortgage != "存款"){
            if(this.state.reviewState == 1){
              this.setState({
                mortgageDoc: "",
              }) 
            }else{
              this.setState({
                mortgageValue: "其他",
                mortgageOtherValue: guaranteeList.mortgage,
              })  
            }         
          }else{
            this.setState({
              mortgageValue: guaranteeList.mortgage,
            }) 
          }
          this.setState({
            assureMeansValue: guaranteeList.guaranteeMode,
            orgAuthorize: guaranteeList.orgAuthorize,
            businessArea: guaranteeList.businessArea,
            guaranteeLetter: guaranteeList.guaranteeLetter,
            depositGood: guaranteeList.depositGood,
            owner:guaranteeList.owner,          
            mortgageVerify: guaranteeList.mortgageVerify,
            // note: guaranteeList.note
          })
        }
      });
    }
    this.setStepDirection();
    window.addEventListener('resize', this.setStepDirection);
  }

  options = [
    { label: "抵押", value: "抵押" },
    { label: "质押", value: "质押" },
    { label: "保证", value: "保证" },
  ];

  // componentWillUnmount() {
  //   window.removeEventListener('resize', this.setStepDirection);
  //   this.setStepDirection.cancel();
  // }

  @Bind()
  @Debounce(200)
  setStepDirection() {
    const { stepDirection } = this.state;
    const w = getWindowWidth();
    if (stepDirection !== 'vertical' && w <= 576) {
      this.setState({
        stepDirection: 'vertical',
      });
    } else if (stepDirection !== 'horizontal' && w > 576) {
      this.setState({
        stepDirection: 'horizontal',
      });
    }
  }

  render() {
    const { stepDirection } = this.state;
    const { pendingTask: {guaranteeList} } = this.props;

    const img =(<img alt="" src={u620} />);
    const { getFieldDecorator,getFieldValue } = this.props.form;
   
    return (
      <Row>
      <Row>
       
      <Col span={21}>  
      <Card
          title="担保情况调查"
          bordered={false}
          style={{ marginBottom: 24 }} 
        >
        <Row>
          <Col span={3}>
          担保方式:
          </Col>
          <Col span={9}>
            <Select 
              value={this.state.assureMeansValue}
              style={{ width: 180}}        
            >
                <Option value={"单一"}>单一</Option>
                <Option value={"组合"}>组合</Option>
                <Option value={"无"}>无</Option>
            </Select>
          
          </Col>
          
          {this.state.assureMeansValue == "单一" ?
          <Col span={12}>
              <RadioGroup 
              value={this.state.guaranteeKind}
              >
                  <Radio value={"抵押"}>抵押</Radio>
                  <Radio value={"质押"}>质押</Radio>
                  <Radio value={"保证"}>保证</Radio>
              </RadioGroup>
          </Col>
          :null
          }
          {this.state.assureMeansValue == "组合" ?
            <div>
              <Col span={12}>
                <CheckboxGroup 
                  style={{ width: '100%' }} 
                  value={this.state.assureMeansAllValue} 
                  onChange={this.handleAssureMeansAllValue}
                  options={this.options}
                > 
                </CheckboxGroup>
              </Col>
            </div>
            :null
          }          
          </Row>        
        </Card>
        {this.state.assureMeansValue == "无" ?
        null:
        <Card
          title="担保机构情况"
          bordered={false}
          style={{ marginBottom: 24 }} 
        >

        <Row>
          <Col span={3}>
          准入机构:
          </Col>
          <Col span={6}>
          <Select value={this.state.orgAuthorize} style={{ width: 180 }} >
              <Option value="省行">省行</Option>
              <Option value="总行">总行</Option>
            </Select>
       
          </Col>
          </Row>
          <Row style={{marginTop:20}}>
            <Col span={3}>
            业务资格:
            </Col>
          <Col span={6}>
            <Select value={this.state.businessArea} style={{ width: 180 }} >
            <Option value="省外跨境资格">省外跨境资格</Option>
            <Option value="省内跨境资格">省内跨境资格</Option>
          </Select>
            </Col>
          </Row>

          <Row style={{marginTop:20}}>
          <Col span={12}>
          是否出具担保函：
       
          </Col>
            <Col span={12}>
                <RadioGroup
                value={this.state.guaranteeLetter}
                >
                  <Radio value={1}>是</Radio>
                  <Radio value={2}>否</Radio>
                </RadioGroup>
            </Col>
          </Row>

          <Row style={{marginTop:20}}>
          <Col span={12}>
          保证金比例是否符合管理规定和合约协议：  
          </Col>
          
            <Col span={12}>
                <RadioGroup
                value={this.state.depositGood}
                >
                  <Radio value={1}>是</Radio>
                  <Radio value={2}>否</Radio>
                </RadioGroup>
            </Col>
          </Row>

        </Card>
        }
        {this.state.assureMeansValue == "无" ?
          null:
        <Card
          title="抵/质押情况"
          bordered={false}
          style={{ marginBottom: 24 }} 
        >

        <Row>
          <Col span={3}>
          抵/质押物为:
          </Col>
          <Col span={6}>
          <Select value={this.state.mortgageValue} style={{ width: 180}} >
              <Option value={"所购车辆"}>所购车辆</Option>
              <Option value={"房屋"}>房屋</Option>
              <Option value={"存款"}>存款</Option>
              <Option value={"其他"}>其他</Option>
            </Select>
       
          </Col>
          {this.state.mortgageValue == "其他" ?
            <Col span={10}>
              <Input placeholder="其他" style={{ width: 180 }} value={this.state.mortgageOtherValue} />        
            </Col>
          :
          null
          }
          </Row>
          <Row style={{marginTop:20}}>
            <Col span={3}>
            所有人:
            </Col>
          <Col span={6}>
            <Select value={this.state.owner} style={{ width: 180 }} >
            <Option value={"本人"}>本人</Option>
            <Option value={"他人"}>他人</Option>
          </Select>
            </Col>
          </Row>

          <Row style={{marginTop:20}}>
          <Col span={3} >
          已办理抵/质押手续:
          </Col>
          <Col span={6}>
          <Select value={this.state.mortgageDoc} style={{ width: 180 }} >
            <Option value={"签订抵/质押合同"}>签订抵/质押合同</Option>
            <Option value={"公司出具股东会决议"}>公司出具股东会决议</Option>
            <Option value={"其他"}>其他</Option>
          </Select>
          </Col>
          {this.state.mortgageDoc == "其他" ?
            <Col span={10}>
              <Input placeholder="其他" style={{ width: 180 }} value={this.state.mortgageDocValue} />        
            </Col>
          :
          null
          }
          </Row>

          <Row style={{marginTop:20}}>
          <Col span={12}>
          抵/质押物是否真实、产品是否清晰，价值是否合理、足值，抵押是否合法、有效：
       
          </Col>
          
            <Col span={12}>
                <RadioGroup value={this.state.mortgageVerify} > 
                  <Radio value={1}>是</Radio>
                  <Radio value={2}>否</Radio>
                </RadioGroup>
            </Col>
          </Row>
          
        </Card>
        }
        </Col>
        </Row> 

        </Row>
      // {/* </PageHeaderLayout> */}
    );
  }
}
